<script setup>
// #region 引入包, 函数和组件
import { ref, watch, useTemplateRef } from "vue";
import { useRoute } from "vue-router"; // 路由信息
import getInterface from "@/api"; // 获取电影接口
import Loading from "@/components/Loading1.vue"; // 加载中组件
// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const route = useRoute();
// #endregion

// #region // 变量
const films = ref([]); // 所有电影
const loading = ref(false); // 显示加载中
const total = ref(0); // 总数
const pageNum = ref(1); // 页码
const nav = useTemplateRef("nav");
const header = useTemplateRef("header");
const cityId = ref(JSON.parse(localStorage.getItem("cityId")).id);
const cityName = ref(JSON.parse(localStorage.getItem("cityId")).name);
// #endregion

// #region // 函数
// 获取电影数据
const getFilms = async (type) => {
  try {
    loading.value = true; // 展示加载中
    const res = await getInterface(
      {
        cityId: cityId.value,
        pageNum: pageNum.value,
        pageSize: 10,
        type,
      },
      "film.list"
    ); // 调接口
    // console.log(res.data.data);
    // 拿到数据
    films.value = films.value.concat(res.data.data.films);
    // console.log(films.value)
    total.value = res.data.data.total;
    loading.value = false; // 隐藏加载中
  } catch (error) {
    // console.log(error);
    loading.value = false; // 隐藏加载中
  }
};
// 处理上映时间
const format = (time) => {
  const dateFuture = new Date(time);
  // console.log(dateFuture);
  const options = { weekday: "long", month: "long", day: "numeric" };
  // console.log(dateFuture.toLocaleDateString("zh-CN", options));
  const date = dateFuture.toLocaleDateString("zh-CN", options);
  // console.log("周" + date.slice(-1) + " " + date.slice(0, -3));
  return "周" + date.slice(-1) + " " + date.slice(0, -3);
};
// 滚动事件
const onScroll = (e) => {
  const et = e.target; // 事件源
  // console.log(et.scrollTop)
  const scrollTop = et.scrollTop; // 滚出去的距离
  const scrollHeight = et.scrollHeight; // 滚动高
  const clientHeight = et.clientHeight; // 可视外高
  if (scrollTop > 100) {
    nav.value.style.position = "fixed";
    header.value.style.top = "0";
    et.style.paddingTop = "0.5rem";
  } else {
    nav.value.style.position = "static";
    header.value.style.top = "-0.44rem";
    et.style.paddingTop = "0";
  }
  if (
    !loading.value &&
    scrollTop >= scrollHeight - clientHeight &&
    pageNum.value * 10 < total.value
  ) {
    // 到达底部
    pageNum.value++;
    // console.log(scrollTop, scrollHeight, clientHeight)
    // 再次调接口
    getFilms(route.path === "/films/nowPlaying" ? 1 : 2);
  }
};
// #endregion
watch(
  () => route.path,
  (nv) => {
    // 找到新的type
    // 路由变化调一次接口
    // 清空films
    films.value = [];
    // 重置pageNum
    pageNum.value = 1;
    getFilms(nv === "/films/nowPlaying" ? 1 : 2);
  },
  { immediate: true, deep: true }
);
// #region // 生命周期和vue函数
// console.log(route.path);
// #endregion
</script>

<template>
  <div class="films" @scroll="onScroll">
    <div ref="header" class="header">
      <span @click="$router.push({ name: 'city' })">{{ cityName }}<i>&#8964;</i></span
      >电影
    </div>
    <nav ref="nav">
      <router-link to="/films/nowPlaying">正在热映</router-link>
      <router-link to="/films/comingSoon">即将上映</router-link>
      <div class="line" :style="{ left: route.path === '/films/nowPlaying' ? '0' : '50%' }"></div>
    </nav>
    <main>
      <Loading :loading></Loading>
      <transition-group tag="ul" name="li">
        <li
          @click="$router.push({ name: 'filmdetail', params: { filmId: film.filmId } })"
          v-for="(film, index) in films"
          :key="film.filmId"
        >
          <img :src="film.poster" />
          <div class="info">
            <h3>
              <em>{{ film.name }}</em
              ><span>{{ film.filmType.name }}</span>
            </h3>
            <p>
              <span v-show="film.grade"
                >观众评分 <b>{{ film.grade }}</b></span
              >
            </p>
            <p>主演: {{ film.actors?.map((v) => `${v.name} `).join("") }}</p>
            <p v-if="route.path === '/films/nowPlaying'">
              {{ film.nation }} | {{ film.runtime }}分钟
            </p>
            <p v-else>上映日期: {{ format(film.premiereAt * 1000) }}</p>
          </div>
          <div
            v-if="film.isPresale"
            :class="['button', { button_come: route.path === '/films/comingSoon' }]"
            @click.stop="$router.push({ name: 'filmcinemas', params: { filmId: film.filmId } })"
          >
            {{ route.path === "/films/nowPlaying" ? "购票" : "预购" }}
          </div>
        </li>
      </transition-group>
    </main>
  </div>
</template>

<style lang="scss" scoped>
@mixin nowrap($size) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: $size;
}

.films {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  overflow-y: auto;
  z-index: 2;
}

.header {
  position: fixed;
  top: -0.44rem;
  height: 0.44rem;
  left: 0;
  width: 100%;
  background: #fff;
  border-bottom: 0.01rem solid #f8f8f8;
  z-index: 11;
  text-align: center;
  line-height: 0.43rem;
  font-size: 0.17rem;
  color: var(--cl-blk);

  span {
    position: absolute;
    left: 0.1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.12rem;

    i {
      position: absolute;
      top: -0.03rem;
      right: -0.1rem;
      transform: scale(1.4, 0.8);
    }
  }
}

.router-link-active {
  color: #ff5500;
}

nav {
  min-height: 0.5rem;
  display: flex;
  align-items: center;
  border-bottom: 0.01rem solid #f4f4f4;
  position: static;
  width: 100%;
  top: 0.43rem;
  left: 0;
  background: #fff;
  z-index: 10;

  a {
    flex: 1;
    text-align: center;
    color: var(--cl-blk);
    font-size: 0.14rem;
  }

  .line {
    position: absolute;
    bottom: -0.015rem;
    left: 0;
    width: 50%;
    display: flex;
    justify-content: center;
    transition: left 0.1s ease-out;

    &::after {
      content: "";
      width: 0.55rem;
      height: 0.02rem;
      background: #ff5500;
    }
  }
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #f4f4f4;
  padding-bottom: 0.1rem;

  img {
    width: 0.66rem;
    height: 0.94rem;
    object-fit: contain;
    border-radius: 0.03rem;
  }

  ul {
    width: 100%;
    flex: 1;
  }

  li {
    background: #fff;
    width: 100%;
    border-bottom: 0.01rem solid #f8f8f8;
    display: flex;
    padding: 0.15rem;
    align-items: center;

    .button {
      width: 0.5rem;
      height: 0.25rem;
      border-radius: 0.04rem;
      border: 0.01rem solid #ffaf8b;
      color: #ff5f16;
      font-size: 0.13rem;
      text-align: center;
      line-height: 0.23rem;
    }

    .button_come {
      border-color: #ffba59;
      color: #ffba59;
    }
  }
}

.li-enter-active {
  transition: opacity 1s ease;
}

.li-enter-from,
.li-leave-to {
  opacity: 0;
}

.info {
  flex: 1;
  padding: 0 0.1rem;

  b {
    color: #ffb232;
    font-size: 0.14rem;
  }

  h3 {
    font-size: 0.16rem;
    color: var(--cl-blk);
    display: flex;
    align-items: center;
    height: 0.22rem;
    width: 2.09rem;

    em {
      max-width: 1.84rem;
      @include nowrap(0.16rem);
    }

    span {
      margin-left: 0.05rem;
      font-size: 0.09rem;
      width: 0.16rem;
      height: 0.14rem;
      background: #d2d6dc;
      color: #fff7ef;
      text-align: center;
      line-height: 0.14rem;
    }
  }

  p {
    height: 0.21rem;
    color: var(--cl-wh);
    line-height: 0.21rem;
    width: 2.09rem;
    @include nowrap(0.13rem);
  }
}
</style>
